<template>
	<view class="container">
		<view class="top-tip">
			账户可提现余额<span>￥2529</span>，每日提现上限￥3000
		</view>
		<view class="card-box">
			<view class="title-tips">
				<span>选择提现银行卡</span>
				<span @click="changeCard">{{changeType ? '取消' : '管理'}}</span>
			</view>
			<view class="card-list">
				<radio-group @change.stop="changeRadio">
					<view class="item-box" v-for="(item, index) in cardList" :key="item.id">
						<view class="item-radio">
							<label class="radio">
								<radio :value="item.id" color="black" />
							</label>
						</view>
						<view class="card-item"
							:style="{backgroundImage: 'url('+ (index % 2 == 0 ? 'https://sz.vvv5g.com/assets/img/s_back.jpg' : 'https://sz.vvv5g.com/assets/img/s_front.jpg') +')'}"
							:class="{change:changeType}" @click.stop="to_tixian">
							<view class="top_icon_box flexjus">
								<view class="left_icon"></view>
								<view class="right_icon"></view>
							</view>
							<view class="card_kahao">
								{{item.cardCode}}
							</view>
							<view class="name_fenh_txt flexjus">
								<view class="left_name_txt s28 fblod familytow">
									{{item.username}}
								</view>
								<view class="right_box s24 familythree f400">
									{{item.bankName}}
								</view>
							</view>
						</view>
					</view>
				</radio-group>
			</view>
			<view class="add-card" :class="{change:changeType}" @click="to_operation">
				{{ changeType ? '解绑此卡' : '+ 添加银行卡' }}
			</view>
			<view class="add-card" style="margin-top:20upx;background-color: #2F2726;color: #fff;" v-if="changeType" @click="withdrawal">
				提现到此卡
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				changeType: false,
				current: 0,
				cardList: [],
				cartId: 0
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList() {
				this.$request({
					url: 'pay/getPayAccount',
					method: 'POST',
				}).then(res => {
					if (res.data.code == 1) {
						this.cardList = res.data.data
					}
				})
			},
			changeCard() {
				this.changeType = !this.changeType
			},
			changeRadio(e) {
				this.cartId = e.detail.value
				for (let i = 0; i < this.cardList.length; i++) {
					if (this.cardList[i].value === e.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			to_operation() {
				if (!this.changeType) this.to_add();
				else this.to_jb()
			},
			to_add() {
				uni.navigateTo({
					url: './add_card'
				})
			},
			to_jb() {
				this.$request({
					url: 'pay/delPayAccount',
					data: {
						ids: this.cartId
					}
				}).then(res => {
					if(res.data.code == 1) {
						this.getList()
					}
					this.$wanlshop.msg(res.data.msg)
				})
			},
			withdrawal() {
				this.$request({
					url: 'user/applyWithdraw',
					data: {
						id: this.cartId
					}
				}).then(res => {
					this.$wanlshop.msg(res.data.msg)
				})
			},
			to_tixian() {
				uni.navigateTo({
					url: './withdrawaling'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30upx;

		.top-tip {
			width: 100%;
			height: 92upx;
			padding: 28upx;
			box-sizing: border-box;
			background: #F0F0F0;
			border-radius: 12upx;
			color: #747474;
			font-size: 26upx;

			span {
				color: #000;
				font-weight: 500;
			}
		}

		.card-box {
			margin-top: 30upx;

			.title-tips {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 28upx;

				span:first-child {
					color: #333;
					font-weight: bold;
				}

				span:last-child {
					color: #666;
				}
			}

			.card-list {
				margin-top: 40upx;

				.item-box {
					width: 100%;
					height: 304upx;
					background-color: #666;
					border-radius: 32upx;
					margin-bottom: 40upx;
					position: relative;

					.item-radio {
						position: absolute;
						top: 125upx;
						left: 30upx;
						z-index: 1;
					}

					.card-item {
						width: 690upx;
						height: 304upx;
						position: absolute;
						left: 0;
						top: 0;
						background-image: url('');
						background-size: 150% 200%;
						background-position: center;
						border-radius: 32upx;
						transition: all .5s;
						z-index: 2;
						padding-right: 34upx;
						box-sizing: border-box;

						&.change {
							left: 100upx;
						}

						.top_icon_box {
							margin-top: 32upx;
							margin-left: 38upx;

							.left_icon {
								width: 34upx;
								height: 44upx;
								background-image: url('');
								background-size: 100% 100%;
							}

							.right_icon {
								width: 118upx;
								height: 38upx;
								background-image: url('');
								background-size: 100% 100%;
							}
						}

						.card_kahao {
							font-family: PingFang SC-Heavy, PingFang SC;
							font-weight: 800;
							letter-spacing: 3upx;
							text-shadow: 0upx 0upx 12upx #000000;
							color: #F1E8B8;
							margin-left: 32upx;
							margin-top: 46upx;
						}

						.name_fenh_txt {
							margin-left: 32upx;
							margin-top: 48upx;

							.left_name_txt {
								color: #D3D3D2;
							}

							.right_box {
								color: #B2B2AF;
							}
						}
					}
				}
			}

			.add-card {
				width: 100%;
				text-align: center;
				height: 100upx;
				line-height: 100upx;
				background: #F4F5F9;
				border-radius: 12upx;
				color: #6F7179;
				font-weight: 500;
				font-size: 26upx;

				&.change {
					background-color: #2F2726;
					color: #fff;
				}
			}
		}
	}
</style>
